<template>
    <div class="record-container">
        <h2 class="record-title">屏幕录制</h2>
        <div class="record-content">
            <video class="record-video" controls src=""></video>
            <button class="record-btn light-2" @click="startRecord" v-show="showRecord">点击开始录制</button>
        </div>
    </div>
</template>

<script>
export default {
    name: "RecordUtil",
    data() {
        return {
            options: {
                audioBitsPerSecond: 128000,//音频比特率
                videoBitsPerSecond: 2500000,//视频比特率
                mimeType: '',
            },
            mediaRecorder: null,
            chunks: [],
            video:null,
            showRecord:true,
        }
    },
    computed: {

    },
    methods: {
        stopRecord() {
            const blob = new Blob(this.chunks, { type: 'video/mp4' });
            const audioURL = URL.createObjectURL(blob);
            this.video.src = audioURL;
            this.showRecord=true;
        },
        putData(e) {
            this.chunks.push(e.data);
        },
        startRecord() {
            this.showRecord=false;
            if(!navigator.mediaDevices){
                alert("未获取多媒体权限");
                return
            }
            navigator.mediaDevices.getDisplayMedia({
                video: true,
                audio: true,
            }).then(stream => {
                this.mediaRecorder = new MediaRecorder(stream, this.options);
                
                this.mediaRecorder.ondataavailable = this.putData;
                this.mediaRecorder.onstop = this.stopRecord;
                this.mediaRecorder.start();
            }).catch(e=>this.showRecord=true);
        },
    },
    mounted() {
        this.video = this.$el.querySelector(".record-video");
    },
}
</script>

<style scoped>
@import url('@/assets/css/button/light-2.css');

.record-container {
    width: 100vw;
    height: 100vh;
    display: flex;
    background-color: #444040;
    justify-content: center;
    align-items: center;
}

.record-title {
    position: absolute;
    color: aliceblue;
    top: 0;
    margin: 0;
}

.record-content {
    position: relative;
    width: 90%;
    height: 90%;
    background-color: #a5a2a2;
    box-shadow: 0 0.25rem 1.125rem rgba(76, 92, 70, 0.1);
    border-radius: 5px;
    display: flex;
    justify-content: center;
    align-items: center;
}
.record-video{
    position: absolute;
    width: 80%;
    height: 60%;
}
.record-btn{
    position: absolute;
    bottom: 10%;
    min-width: 100px;
    min-height: 50px;
    font-size: 25px;
    text-decoration: none;
    user-select: none;
    cursor: pointer;
}
</style>